<script setup>
import AMap from '@/components/AMap/AMap.vue';
import { ref, watch, computed } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' }
})
const lnglat = ref('')
// 同步经纬度数据
watch(() => props.modelValue, (val) => {
  lnglat.value = val || '106.709177,26.629907'
}, { immediate: true })
// 记录当前经纬度
const message = computed(() => `当前点位经纬度：${lnglat.value}`)
// 地图加载完成回调函数
const mapInit = (AMap, map, point) => {
  // 加一个标点
  const marker = new AMap.Marker({
    position: new AMap.LngLat(point[0], point[1]),
  });
  map.add(marker);
}
</script>

<template>
  <div class="map-box">
    <div class="com-full">
      <AMap :mapInit="mapInit" :lnglat="lnglat" />
    </div>
    <a-alert :message="message" type="info" show-icon style="margin-top: 10px;" />
  </div>
</template>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 500px;
}
</style>